<template>
    <el-container>
        <el-aside width="12%">
            <Menus :menuList="getMenuInfo"></Menus>
        </el-aside>
        <el-container>
            <el-header height="95px">
                <div class="headerRight">
<!--                    用户信息-->
                    <el-dropdown @command="btLoginOut">
                        <div class="el-dropdown-link">
                            <img src="img/img2.jpeg" alt="">
                            <span class="userName">{{getUserInfo.userName}}</span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>个人中心</el-dropdown-item>
                            <el-dropdown-item>注销</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import Menus from './Menu';
import {mapGetters} from 'vuex'
export default {
    name: "index",
    components:{
        Menus
    },
    computed: {
        ...mapGetters(['getMenuInfo', 'getUserInfo'])
    },
    methods:{
        btLoginOut(){
            this.$store.dispatch('loginEdit');
            this.$router.push('/login');
        }
    }
}
</script>

<style scoped>
    .el-container{
        height: 100%;
    }
  /deep/ .el-aside{
      height: 100%;
      box-shadow: 3px 0px 40px #F1F1F1;
  }
    header.el-header{
        box-shadow: 0px 2px 30px #F1F1F1;
        line-height: 95px;
        position: relative;
    }
/*    用户信息*/
    .el-header .headerRight{
        float: right;
        margin-right: 50px;
        font-weight: 600;
    }
    .userName{
        color: #333333;
        font-weight: 600;
        font-size: 18px;
    }
    .headerRight img{
        width: 55px;
        height: 55px;
        border-radius: 50%;
        vertical-align: middle;
        display: inline-block;
        margin-right: 10px;
    }
    .headerRight i{
        font-size: 18px;
        display: inline-block;
        margin-left: 10px;
    }
</style>
